<template>
    <div>
        <div class="bacteria-title" :data-font="$i18n.locale">{{ $t('application.protein.rules.title') }}</div>
        <div class="bacteria-rules">
            <p :data-font="$i18n.locale">{{ $t('application.protein.rules.p1') }}
                <br><br>
            </p>
            <p :data-font="$i18n.locale">{{ $t('application.protein.rules.p7') }}
                <br><br>
            </p>
            <p :data-font="$i18n.locale">{{ $t('application.protein.rules.p2') }}</p>
            <p :data-font="$i18n.locale">{{ $t('application.protein.rules.p3') }} <br><br></p>
            <p :data-font="$i18n.locale">{{ $t('application.protein.rules.p4') }}</p>
            <p :data-font="$i18n.locale">{{ $t('application.protein.rules.p5') }}</p>
            <p :data-font="$i18n.locale">{{ $t('application.protein.rules.p6') }}</p>
        </div>
        <div class="messages">
            <p :data-font="$i18n.locale">{{ $t('application.protein.message') }}</p>
        </div>
        <!-- 底部报名按钮 -->
        <div class="application-btns">
            <el-button :data-font="$i18n.locale" class="application-btn" @click="addRegistrationForm">{{
                $t('application.protein.rules.btn')
            }}</el-button>
        </div>
    </div>
</template>

<!-- 蛋白设计 -->

<script>
export default {
    methods: {
        addRegistrationForm() {
            this.$router.push('/limitedTime/registrationForm/protein')
        }
    }
}
</script>

<style lang="less" scoped>
.bacteria-title {
    font-size: 1.17rem;
    font-weight: bold;
    color: #212121;
    line-height: 1.92rem;
    margin-bottom: 0.32rem;
}

.bacteria-title[data-font='zh'] {
    font-family: 'AlibabaPuHuiTi-Bold', 'AlibabaPuHuiTi';
}

.bacteria-title[data-font='en'] {
    font-family: 'RNSSanzSC-Bold, RNSSanzSC';
}

.bacteria-rules {
    width: 32rem;

    p[data-font='zh'] {
        font-size: 0.53rem;
        font-weight: normal;
        color: #68656C;
        line-height: 0.85rem;
        letter-spacing: 2px;
        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
    }

    p[data-font='en'] {
        font-size: 0.48rem;
        font-family: 'Helvetica';
        color: #68656C;
        line-height: 0.75rem;
        word-break: keep-all;
        word-wrap: break-word;
    }
}

.application-btns {
    width: 32rem;
    padding: 1.28rem 0 1.28rem;
    text-align: center;

    .application-btn {
        width: 12.64rem;
        height: 1.6rem;
        background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
        border-radius: 0.21rem;
        backdrop-filter: blur(10px);

        :deep(span) {
            font-size: 0.64rem;
            font-weight: normal;
            color: #FFFFFF;
            line-height: 0.96rem;
        }
    }

    .application-btn[data-font='zh'] {
        :deep(span) {
            font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
        }
    }

    .application-btn[data-font='en'] {
        :deep(span) {
            font-family: 'PingFangSC-Regular, PingFang SC';
        }
    }
}

.messages {
    width: 32rem;
    margin: 1.28rem auto 0;

    p {
        font-size: 0.59rem;
        color: #7709CC;
        line-height: 0.77rem;
    }

    p[data-font='zh'] {
        font-family: 'IdeaFonts-DianHei-FEJ', 'IdeaFonts-DianHei';
        font-weight: normal;
    }

    p[data-font='en'] {
        font-family: 'Helvetica-Bold', 'Helvetica';
        font-weight: bold;
        word-break: keep-all;
        word-wrap: break-word;
    }
}
</style>